<template>
  <Card :bordered="false" dis-hover>    
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
    >
      <template #status_str="{ row }">
        <Badge v-if="row.status_str == '显示'" status="processing" :text="row.status_str" />
        <Badge v-else status="warning" :text="row.status_str" />
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-settings-moduleset-edit',
            flag: 'v1/settings/moduleset/edit',
          }"
          >编辑</a
        >
      </template>
    </Table>
    
    <Modal
      title="编辑"
      width="600"
      v-model="articleModal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
    >
      <Form :label-width="80" :model="formData" ref="formItem">
        <FormItem label="模块" prop="name">
          {{formData.name}}
        </FormItem>
        <FormItem label="名称" prop="alias_name">
          <Input placeholder="请输入展示名称" v-model="formData.alias_name" />
        </FormItem>

        <FormItem label="状态" prop="status">
          <Switch v-model="formData.status">
            <template #open>
              <span>显示</span>
            </template>
            <template #close>
              <span>隐藏</span>
            </template>
            </Switch>
        </FormItem>
      </Form>
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button
          :loading="subloading"
          type="primary"
          @click="sendData"
          class="ivu-ml-16"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import { getModuleList,getModuleInfo,updateModuleInfo } from "@/api/jzy";
export default {
  name: "moduleset",
  data() {
    return {
      articleModal: false,
      subloading: false,
      params: {
        pageSize: 10
      },
      formData: {
        name: "",
        alias_name: '',
        status: true,
      },
      columns: [
        {
          title: "模块",
          key: "name",
        },
        {
          title: "名称",
          key: "alias_name",
        },
        {
          title: "首页展示",
          slot: "status_str",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      list: [],
      loading: false,
    };
  },
  methods: {
    askData() {
      this.params.page = 1;
      this.getData();
    },
    getData() {
      const params = this.params;
      this.loading = true;
      getModuleList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sendData() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          this.subloading= true
          let params={
            id:this.formData.id,
            name: this.formData.name,
            alias_name: this.formData.alias_name,
            status: this.formData.status?1:0
          }
          updateModuleInfo(params).then(res=>{
            this.articleModal= false
            this.subloading= false
            this.getData();
          })
          .finally(() => {
              this.subloading=false
          });
        }
      });
    },
    canceledit() {
      this.articleModal = false;
    },
    handleEdit(row) {
      this.articleModal = true;
      this.$refs['formItem'].resetFields()
      getModuleInfo({id:row.id}).then(res=>{
        this.formData= {
          id:row.id,
          name: res.name,
          alias_name: res.alias_name,
          status: res.status?true:false,
        }
      })
      
    }
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang='less' scoped>
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
